<template>
    <div class="add_addressDetail">
        <header-bar :title="form.id?'编辑地址':'添加地址'">
            <div slot="right" class="save_icon" @click="save">
                保存
            </div>
        </header-bar>
        <div class="add_form">
            <div class="add_form_item">
                <input type="text" @focus="inputFocus" @blur="inputBlur" placeholder="收货人" maxlength="16" v-model="form.receiverName">
            </div>
            <div class="add_form_item">
                <input type="tel" @focus="inputFocus" @blur="inputBlur" placeholder="手机号码" v-model="form.phone" maxlength="11">
            </div>
            <div class="add_form_item" @click="showaddressDetailPicker($event)">
                <input type="text" v-model="addressDetail" placeholder="所在地区" readonly />
                <div class="arrow_r"></div>
            </div>
            <div class="add_form_item">
                <input type="text" @focus="inputFocus" @blur="inputBlur" v-model="form.addressDetail" maxlength="64" placeholder="详细地址">
            </div>
            <div class="line_height"></div>
            <div class="add_form_item">
                <div class="add_form_item_left">设置默认地址</div>
                <cube-switch v-model="defaultStatus"></cube-switch>
            </div>
            <div class="add_form_item" v-if="form.id" @click="deleteClick">
                <div class="add_form_item_left red">删除收货地址</div>
            </div>
        </div>
    </div>
</template>

<script>
import HeaderBar from 'components/header.vue'
import { provinceList, cityList, areaList } from '../../libs/area';
import { mapState, mapActions } from 'vuex'
import { Switch } from 'cube-ui';
const addressDetailData = provinceList
addressDetailData.forEach(province => {
    province.children = cityList[province.value]
    province.children.forEach(city => {
        city.children = areaList[city.value]
    })
})
export default {
    components: {
        HeaderBar,
        'cube-switch':Switch,
    },
    created() {
        let id = this.$route.query.id;
        if (id) {
            this.form.id = id;
            this.addressDetailDetail();
        }
    },
    data() {
        return {
            type: 0,
            form: {
                id: '',
                province: '',
                city: '',
                region: '',
                addressDetail: '',
                receiverName: '',
                phone: '',
                defaultStatus: 'N',
            },
            addressDetail: '',
            defaultStatus: false,
            fromType:0,
            scrollTopFlag:0
        }
    },
    methods: {
        ...mapActions(["showModal", "showMsg", 'toggleLoading']),
        inputFocus(){
           this.scrollTopFlag = document.body.scrollTop;
        },
        inputBlur(){
            document.body.scrollTop =  this.scrollTopFlag;
        },
        save() {
            let _this = this;
            if (!this.form.receiverName) {
                this.showMsg({ content: '请填写收货人' });
                return false;
            }
            if (!this.form.phone) {
                this.showMsg({ content: '请填写手机号码' });
                return false;
            } else if (!/^1[3-8]\d{9}$/.test(this.form.phone)) {
                this.showMsg({ content: '请填写正确的手机号码' });
                return false;
            }
            if (!this.addressDetail) {
                this.showMsg({ content: '请选择所在地区' });
                return false;
            }
            if (!this.form.addressDetail) {
                this.showMsg({ content: '请填写详细地址' });
                return false;
            }
            this.toggleLoading({flag:true});
            this.$ajax.addressSaveOrUpdate(this.form).then(res=>{
                this.toggleLoading({flag:false});
                if(res.code=='0000'){
                    this.showMsg({ content: '保存成功'});
                    this.$router.back();
                }
            }).catch(() => { this.toggleLoading({flag:false}); });
        },
        showaddressDetailPicker(e) {
            this.addressDetailPicker.show();
            e.target.blur();
        },
        selectHandle(selectedVal, selectedIndex, selectedText) {
            this.form.province = selectedText[0];
            this.form.city = selectedText[1];
            this.form.region = selectedText[2];
            this.addressDetail = selectedText.join(' ');
        },
        cancelHandle() {

        },
        addressDetailDetail() {
            this.toggleLoading({flag:true});
            this.$ajax.getAddressInfo({ id: this.form.id}).then(res=>{
                this.toggleLoading({flag:false});
                if(res.code=='0000'){
                    this.form = Object.assign({}, this.form, res.data);
                    this.addressDetail = this.form.province + ' ' + this.form.city + ' ' + this.form.region;
                    if(res.data.defaultStatus=='Y'){
                        this.defaultStatus = true;
                    }
                }
            }).catch(() => { this.toggleLoading({flag:false}); });
            // let _this = this;
            // this.toggleLoading({flag:true});
            // this.axios2.post(api.useraddressDetailInfo, { id: this.form.id, callback: 'useraddressDetailInfo' }).then(res => {
            //     useraddressDetailInfo(res.data);
            // }).catch(() => { });

            // window.useraddressDetailInfo = function (msg) {
            //     let res = util.getSdkData(msg, _this);
            //     _this.toggleLoading({flag:false});
            //     if (res) {
            //         _this.form = Object.assign({}, _this.form, res);
            //         _this.addressDetail = _this.form.province + ' ' + _this.form.city + ' ' + _this.form.region;
            //         if (_this.form.defaultStatus == 'Y') {
            //             _this.defaultStatus = true;
            //         }
            //     }
            // };
        },
        deleteClick() {
            this.showModal({
                content: "确定删除改地址吗？",
                btns: ["取消", "删除"],
                // colors:['#14C877','#666666'],
                callbacks: [this.cancelCb, this.confirmCb]
            });
        },
        cancelCb() {

        },
        confirmCb() {
            this.toggleLoading({flag:true});
            this.$ajax.addressRemove({id:this.form.id}).then(res=>{
                this.toggleLoading({flag:false});
                if(res.code=='0000'){
                    this.showMsg({ content: '删除成功'});
                    this.$router.back();
                }
            }).catch(() => { this.toggleLoading({flag:false}); });
        }
    },
    mounted() {
        this.addressDetailPicker = this.$createCascadePicker({
            title: '请选择',
            data: addressDetailData,
            onSelect: this.selectHandle,
            onCancel: this.cancelHandle
        })
    },
    beforeRouteEnter (to, from, next) {
        next((vm)=>{
            if(from.name=='confirmGoods'){
                vm.fromType=1;
            }
        });
    },
    watch: {
        defaultStatus(val) {
            if (val) {
                this.form.defaultStatus = 'Y';
            } else {
                this.form.defaultStatus = 'N';
            }
        },
    }
}
</script>

<style scoped>
.save_icon {
  font-size: .32rem;
  color: #14C877;
}
.add_form {
}
.add_form_item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0.4rem /* 20/50 */;
  height: 0.96rem /* 48/50 */;
  border-bottom: 1px solid #f6f6f6;
}

.add_form_item input {
  font-size: 0.28rem /* 14/50 */;
  color: #323746;
  flex: 1;
  height: 100%;
  line-height: 100%;
}

.add_form_item .arrow_r {
  background: url("~imgs/common/right_arrow_icon.png") no-repeat;
  background-size: 100% 100%;
  width: 0.14rem /* 7/50 */;
  height: 0.24rem; /* 12/50 */
}
.line_height {
  width: 100%;
  height: 0.2rem /* 10/50 */;
  background: #F4F4F4;
}
.add_form_item_left {
  font-size: 0.28rem /* 14/50 */;
  color: #323746;
}
.add_form_item_left.red {
  color: #FF4137;
}
/deep/ .cube-switch-input{
    width: .98rem;
    height: .58rem;
}
/deep/ .cube-switch-ui{
    width: .98rem;
    height: .58rem;
}
/deep/ .cube-switch .cube-switch-input:checked+.cube-switch-ui{
    background: #4CD964;
    border-color: #4CD964;
}
</style>

